/*!
 * Copyright 2014-2024  JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
 */
@import '../_tokens/index';

.dropdown {
  position: relative;

  @media (width < $breakpoint-desktop-min) {
    position: static;
  }

  &--list {
    position: absolute;
    z-index: 10;
    top: 44px;

    right: 0;

    display: none;

    overflow-y: auto;

    width: fit-content;

    min-width: 272px;
    max-width: 360px;
    max-height: 400px;
    padding: 12px 0;

    transform: translate3d(0, 0, 0);

    border: 1px solid lighten(rgb(50, 50, 55), 15%); // color-background-nav-dt
    background-color: var(--color-background-nav-dt);

    box-shadow: 0 2px 8px 0 #00000040;

    @media (width < $breakpoint-desktop-min) {
      top: 0;
      right: 0;

      min-width: min(360px, 100vw);

      height: 100vh;
      max-height: unset;

      padding: 0;

      border: none;
    }

    @media (width < $breakpoint-tablet-min) {
      width: 100vw;
      max-width: unset;
    }

    &_positioned_right {
      right: 0;
    }

    &_positioned_left {
      left: 0;

      @media (width < $breakpoint-desktop-min) {
        left: unset;
      }
    }

    &_expanded {
      display: block;
    }

    &_toc-list {
      @media (width >= $breakpoint-desktop-min) {
        position: relative;

        top: 0;

        display: block;

        min-width: 100%;
        max-width: unset;

        max-height: unset;

        padding: 0;

        border: none;

        background-color: transparent;

        box-shadow: none;
      }

      @media (width >= $breakpoint-tablet-min) and (width < $breakpoint-desktop-min) {
        width: 408px;
      }
    }
  }

  &--option {
    position: relative;

    display: flex;

    align-items: center;

    padding: var(--size-s2) 12px;

    list-style-type: none;

    cursor: pointer;
    letter-spacing: -0.03em;

    color: var(--color-text-nav-dt);

    border: none;
    background-color: var(--color-background-nav-dt);

    font: var(--font-text-m);
    gap: 8px;

    @media (width < $breakpoint-desktop-min) {
      padding: 14px 12px;
    }

    &:hover {
      background-color: lighten(rgb(50, 50, 55), 10%); // color-background-nav-dt
    }

    &:focus-visible {
      z-index: 1;

      outline: var(--focus-outline);
      outline-offset: 0;
      box-shadow:
        inset 4px 0 0 var(--color-key-blue-50),
        inset -4px 0 0 var(--color-key-blue-50);
    }

    &:visited {
      color: var(--color-text-nav-dt);
    }

    &_active {
      background-color: var(--color-key-blue);

      &:hover {
        background-color: var(--color-key-blue-hover);
      }
    }

    &_link {
      text-decoration: none;

      color: var(--color-text-nav-dt);

      &:focus-visible {
        outline: var(--focus-outline);
        outline-offset: -4px;
      }
    }

    & .checkbox {
      pointer-events: none;

      &::first-letter {
        text-transform: uppercase;
      }
    }
  }

  &--option-icon {
    display: inline-block;

    flex-shrink: 0;

    width: var(--size-m1);
    height: var(--size-m1);

    &_selected {
      background-image: url('../_assets/check.svg');
    }
  }

  &--option-text {
    display: inline-block;
    overflow: hidden;

    text-overflow: ellipsis;
  }

  &--overlay {
    position: absolute;
    z-index: 4;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: none;

    width: 100vw;
    height: 100vh;

    content: '';

    background-color: var(--color-b50);

    .dropdown--list_expanded + & {
      display: block;

      @media (width >= $breakpoint-desktop-min) {
        display: none;
      }
    }
  }

  &--header {
    position: sticky;
    z-index: 2;
    top: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    height: 52px;

    padding-left: var(--size-s3);

    color: var(--color-w70);

    border-bottom: 1px solid lighten(rgb(50, 50, 55), 15%); // color-background-nav-dt

    background-color: var(--color-background-nav-dt);

    @media (width >= $breakpoint-desktop-min) {
      display: none;
    }

    @media (width <= $breakpoint-tablet-max) {
      & + :not(.sidebar--inner) {
        margin-top: 12px;
      }
    }

    & .button {
      @media (width < $breakpoint-desktop-min) {
        border-radius: 0;
        outline-offset: -4px;
      }

      &:hover {
        background-color: var(--color-w10);
      }

      &:active {
        background-color: var(--color-w16);
      }
    }
  }
}
